<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue.route.js"></script>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
    <style>
        .box {
            width: 170px;

            background: darkcyan;
            padding: 30px;
        }

        table {
            border: 1px solid #000;
        }

        td {
            border: 1px solid #000;
            padding: 10px;
            text-align: center;
        }

        ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        li {
            width: 200px;
            background: pink;
        }

        .zoom-enter-active {
            animation: zoomInDown .9s;
        }

        .zoom-leave-active {
            animation: zoomOutDown .9s;
        }

        .box {
            width: 50%;
            min-height: 300px;
            border: 1px solid #999;
            border-radius: 10px;

        }

        .router-link-exact-active,
        .router-link-active {
            font-size: 30px;
            font-weight: bold;
            color: #f50;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <router-view class="box"></router-view>
    </div>
    <template id="myapp">
        <div>
            <h2>main--主路由</h2>
            <hr>
            <router-view></router-view>
            <myfoot></myfoot>
        </div>
    </template>
    <template id="wechat">
        <div>
            <h2>wechat --wechat</h2>
        </div>
    </template>
    <template id="contact">
        <div>
            <h2>通讯录--</h2>
            <div>
                <p v-for="(item,index) in players" :key=index>
                    <router-link :to="{name:'detail',params:{id:item.id},query:item}">{{item.name}}</router-link>
                </p>
            </div>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>Find - 朋友圈 </h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - 个人中心 </h2>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>404 - 404 - NotFOund </h2>
        </div>
    </template>
    <template id="myfoot">
        <footer>
            <router-link v-for="(item,index) in flist" :key="index" :to="{name:item.name}">{{item.title}}</router-link>
        </footer>
    </template>
    <template id="detail">
        <div>
            <h2>歌手 详情 - <button @click="$router.go(-1)">返回</button></h2>
            <h2> id---{{$route.params.id}}</h2>
            <h2>name--{{$route.query.name}}</h2>
            <img :src="$route.query.picUrl" width="300px" height="300px" alt="">
        </div>
    </template>
</body>
<script>
    Vue.component('myfoot', {
        template: "#myfoot",
        data() {
            return {
                flist: [
                    { path: "/myapp/wechat", name: "wechat", icon: "", title: "微信" },
                    { path: "/myapp/contact", name: "contact", icon: "", title: "通讯录" },
                    { path: "/myapp/find", name: "find", icon: "", title: "朋友圈" },
                    { path: "/myapp/mine", name: "mine", icon: "", title: "我的" },
                ]
            }
        }
    })
    //定义路由组件
    const myapp = {
        template: "#myapp",
    }
    const wechat = {
        template: "#wechat",
        beforeRouteEnter(to, from, next) {
            next()
        },
        beforeRouteLeave(to, from, next) {
            if (window.confirm("真的要离开吗!")) {
                next()
            } else {
                next(false)
            }
        }
    }
    const contact = {
        template: "#contact",
        data() {
            return {
                players: []
            }
        },
        mounted() {
            $.ajax({
                url: "http://47.104.209.44:3333/artist/list",
                type: "GET",
                success: res => {
                    this.players = res.artists
                }
            })
        }
    }
    const find = {
        template: "#find"
    }
    const mine = {
        template: "#mine"
    }
    const notfound = {
        tempalte: "#notfound"
    }
    const detail = {
        template: "#detail"
    }
    //定义路由
    const routes = [
        {
            path: "/", redirect: "/myapp"
        },
        {
            path: "/myapp", name: "myapp", redirect: "/myapp/wechat", component: myapp,
            children: [
                { path: "/myapp/wechat", name: "wechat", component: wechat },
                { path: "/myapp/contact", name: "contact", component: contact },
                { path: "/myapp/find", name: "find", component: find },
                { path: "/myapp/mine", name: "mine", component: mine },
            ]
        },
        {
            path: "/404", name: "notfound", component: notfound
        },
        {
            path: "/detail/:id",
            name: "detail",
            component: detail
        },
        {
            path: "*",
            redirect: "/404"
        }
    ]
    //创建路由
    const router = new VueRouter({
        routes,
        mode: "hash"
    })
    // 全局守卫
    router.beforeEach((to, from, next) => {
        // 判断是否登录是否可以进入某个路由
        console.log("beforeEach - 路由全局前置守卫")
        console.log(to)
        console.log(from)
        next()
    })

    router.afterEach((to, from) => {
        console.log("afterEach == " + to.name)
    })
    //挂载根实例
    const vm = new Vue({
        router,
        watch: {
            '$route': function (to, from) {
                // console.log(to)
                // console.log(from)
            }
        },
        data: {
            title: "Vue 路由的使用"
        }
    }).$mount("#app")
</script>

</html>